<template>
	<view class="wrap">
		<xk-header title="会议室列表"></xk-header>
		<scroll-view scroll-y @scrolltolower="getMore" style="height: 82vh;">
			<view class="list" v-if="activitySiteList.length">
				<view class="list-item" v-for="(item,i) in activitySiteList" :key="i">
					<activitySiteListItem :showPrice="false" :itemData="item" @click="navToDetail(item.id)">
						<template v-slot:bottom>
							<view class="reservation-wrap">
								<view>
									<u-button :customStyle="buttonStyle" @click.stop="navToReservation(item)">立刻预约</u-button>
								</view>
							</view>
						</template>
					</activitySiteListItem>
				</view>
				<noData></noData>
			</view>
			<view v-else class="flex-row-center" style="height: 90vh;">
				<u-empty mode="list" text="暂无数据"></u-empty>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import request from './api'

export default {
  data() {
    return {
      selectIndex: 0,
      activitySiteList: [],
      pages: {
        page: 1,
        size: 10,
      },
      buttonStyle: {
        'height': '56rpx',
        'width': '186rpx',
        'background-color': '#3C8991',
        'color': '#fff',
        'font-size': '28rpx',
      },
    };
  },
  mounted() {
    this.getMeetingRoomList();
  },
  methods: {
    getMeetingRoomList(init = false) {
      const data = { ...this.pages,type:1};
      if (this.selectIndex !== 0) data.type = this.selectIndex;
      request.getMeetingRoomList(data).then(res => {
		  console.log(res);
        if (init) this.activitySiteList = [];
        if (res.data.length) {
          res.data.forEach(item => {
            this.activitySiteList.push({
              id: item.meeting_room_id,
              imgSrc: item.meeting_room_logo.replace(/;/g, ''),
			  tags: item.meeting_room_labels.split(';'),
              title: item.meeting_room_name,
              peopleNum: item.capacity,
              area: item.area_size,
              address: item.position,
              appropriate: item.suit,
            });
          });
        } else {
          this.pages.page--;
          uni.$u.toast('暂无数据');
        }
      });
    },
    getMore(){
		this.pages.page++;
		this.getMeetingRoomList();
	},
    navToDetail(id) {
      uni.navigateTo({
        url: './meettingRoomDetail?id=' + id,
      });
    },
    navToReservation(item) {
      uni.navigateTo({
        url: './activitySiteReservation?id=' + item.id + '&name=' + item.title + '&num=' + item.peopleNum,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap{
	padding: 24rpx;
	.choose-wrap{
		width: 100%;
		display: grid;
		grid-template-columns: repeat(4, 22%);
		gap: 22rpx;
		justify-content: center;
		.choose-item{
			width: 100%;
			height: 50rpx;
			line-height:44rpx;
			border-radius: 12rpx;
			font-size: 28rpx;
			border: 1px solid rgba(187, 187, 187, 1);
			text-align: center;
			color: #2F3030;
		}
		.choose-item-active{
			background-color: #3C8991;
			border: 1px solid #3C8991;
			color: white;
		}
	}
	.list{
		padding-top: 26rpx;
		&-item{
			margin-top: 24rpx;
			content-visibility: auto;
		}
	}
}
.reservation-wrap{
	padding: 0 34rpx 34rpx;
	display: flex;
	justify-content: flex-end;
}
</style>
